.switch-box {
  display: block;
  position: absolute;
  top: 289px;
  left: 210px;
}
.switch-box .switch-box-slider {
  position: relative;
  display: inline-block;
  height: 8px;
  width: 32px;
  background: #d5d5d5;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.switch-box .switch-box-slider:after {
  position: absolute;
  left: -8px;
  top: -8px;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eeeeee;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  content: '';
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.switch-box .switch-box-input {
  display: none;
}
.switch-box .switch-box-input ~ .switch-box-label {
  
  position: absolute;
  left: -20px;
  top: 30px;
  width: 80px;
  color: white;
  font-size: 14px;
  font-family: 苹方;
}
.switch-box .switch-box-input:checked ~ .switch-box-slider:after {
  left: 16px;
}
.switch-box .switch-box-input:disabled ~ .switch-box-slider {
  background: #e2e2e2;
  cursor: default;
}
.switch-box .switch-box-input:disabled ~ .switch-box-slider:after {
  background: #d5d5d5;
}
.switch-box.is-primary .switch-box-input:checked:not(:disabled) ~ .switch-box-slider {
  background: #28e1bd;
}
.switch-box.is-primary .switch-box-input:checked:not(:disabled) ~ .switch-box-slider:after {
  background: #1abc9c;
}
.switch-box.is-info .switch-box-input:checked:not(:disabled) ~ .switch-box-slider {
  background: #5faee3;
}
.switch-box.is-info .switch-box-input:checked:not(:disabled) ~ .switch-box-slider:after {
  background: #3498db;
}
.switch-box.is-success .switch-box-input:checked:not(:disabled) ~ .switch-box-slider {
  background: #54d98c;
}
.switch-box.is-success .switch-box-input:checked:not(:disabled) ~ .switch-box-slider:after {
  background: #2ecc71;
}
.switch-box.is-danger .switch-box-input:checked:not(:disabled) ~ .switch-box-slider {
  background: #ed7669;
}
.switch-box.is-danger .switch-box-input:checked:not(:disabled) ~ .switch-box-slider:after {
  background: #e74c3c;
}
.switch-box.is-warning .switch-box-input:checked:not(:disabled) ~ .switch-box-slider {
  background: #eb9950;
}
.switch-box.is-warning .switch-box-input:checked:not(:disabled) ~ .switch-box-slider:after {
  background: #e67e22;
}

.container{
  width: 200px;
  margin: 30px auto;
}




.rangeslider{
  
  position:absolute;
  width: 150px;
  background:#38F8EB;
  -ms-touch-action:none;
  touch-action:none
}
.rangeslider,.rangeslider .rangeslider__fill{
  display:block;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4)
}
.rangeslider .rangeslider__handle{
  background:#fff;
  border:1px solid #ccc;
  cursor:pointer;
  display:inline-block;
  position:absolute;
  box-shadow:0 1px 3px rgba(0,0,0,.4),0 -1px 3px rgba(0,0,0,.4)
}
.rangeslider .rangeslider__handle .rangeslider__active{
  opacity:1
}
.rangeslider .rangeslider__handle-tooltip{
  width:40px;
  height:40px;
  text-align:center;
  position:absolute;
  background-color:rgba(0,0,0,.8);
  font-weight:400;
  font-size:14px;
  transition:all .1s ease-in;
  border-radius:4px;
  display:inline-block;
  color:#fff;
  left:50%;
  transform:translate3d(-50%,0,0)
}
.rangeslider .rangeslider__handle-tooltip span{
  margin-top:12px;
  display:inline-block;
  line-height:100%
}
.rangeslider .rangeslider__handle-tooltip:after{
  content:' ';
  position:absolute;
  width:0;
  height:0
}
.rangeslider-horizontal{
  height:4px;
  border-radius:10px
}
.rangeslider-horizontal .rangeslider__fill{
  height:100%;
  background-color:#38F8EB;
  border-radius:10px;
  top:0
}
.rangeslider-horizontal .rangeslider__handle{
  width:0px;
  height:0px;
  border-radius:30px;
  top:50%;
  transform:translate3d(-50%,-50%,0)
}
.rangeslider-horizontal .rangeslider__handle:after{
  content:' ';
  position:absolute;
  width:13px;
  height:13px;
  top:-6.5px;
  left:-6.5px;
  border-radius:50%;
  background-color:#38F8EB;
  box-shadow:0 1px 3px rgba(0,0,0,.4) inset,0 -1px 3px rgba(0,0,0,.4) inset
}
.rangeslider-horizontal .rangeslider__handle-tooltip{
  top:-55px
}
.rangeslider-horizontal .rangeslider__handle-tooltip:after{
  border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(0,0,0,.8);left:50%;bottom:-8px;transform:translate3d(-50%,0,0)}.rangeslider-vertical{margin:20px auto;height:150px;max-width:10px;background-color:transparent}.rangeslider-vertical .rangeslider__fill,.rangeslider-vertical .rangeslider__handle{position:absolute}.rangeslider-vertical .rangeslider__fill{width:100%;background-color:#7cb342;box-shadow:none;bottom:0}.rangeslider-vertical .rangeslider__handle{width:30px;height:10px;left:-10px;box-shadow:none}.rangeslider-vertical .rangeslider__handle-tooltip{left:-100%;top:50%;transform:translate3d(-50%,-50%,0)}.rangeslider-vertical .rangeslider__handle-tooltip:after{border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid rgba(0,0,0,.8);left:100%;top:12px}.rangeslider-reverse.rangeslider-horizontal .rangeslider__fill{right:0}.rangeslider-reverse.rangeslider-vertical .rangeslider__fill{top:0;bottom:inherit}.rangeslider__labels{position:relative}.rangeslider-vertical .rangeslider__labels{position:relative;list-style-type:none;margin:0 0 0 24px;padding:0;text-align:left;width:250px;height:100%;left:10px}.rangeslider-vertical .rangeslider__labels .rangeslider__label-item{position:absolute;transform:translate3d(0,-50%,0)}.rangeslider-vertical .rangeslider__labels .rangeslider__label-item::before{content:'';width:10px;height:2px;background:#000;position:absolute;left:-14px;top:50%;transform:translateY(-50%);z-index:-1}.rangeslider__labels .rangeslider__label-item{position:absolute;font-size:14px;cursor:pointer;display:inline-block;top:10px;transform:translate3d(-50%,0,0)}



* {
  scrollbar-color: #696F75 #444B53; /* 滑块颜色  滚动条背景颜色 */
  scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */
}



.bigger2{
    transition: all 0.5s;
}
.bigger2:hover{
    transform: scale(1.1); 
}

